<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>监管系统</title>
    <link rel="shortcut icon"
          href="https://www.aioclinic.com/alioss-proxy/wenuan-oss-public/pc_img/website/logo/qzt_short.ico">
    <link th:href="@{/plugins/css/bootstrap.css(v=${version})}" rel="stylesheet">
    <link th:href="@{/css/weknow.css(v=${version})}" rel="stylesheet">
    <link th:href="@{/css/accountManage.css(v=${version})}" rel="stylesheet">
</head>
<body>
<div class="queryDiv">
    <input type="text" class="nameIpt" placeholder="账号名称" id="userName" maxlength="32">
    <input type="button" id="search" class="btn btn-primary search">
    <input type="button" class="btn btn-primary addAccount" value="新增账号">
</div>
<div class="dataDiv">
    <table class="table table-condensed table-hover table-bordered" id="dataTable">
        <thead class="bg-default">
        <tr>
            <th class="text-center" style="width:20%;">账号名称</th>
            <th class="text-center" style="width:15%;">姓名</th>
            <th class="text-center" style="width:15%;">手机</th>
            <th class="text-center" style="width:15%;">管理员</th>
            <th class="text-center" style="width:35%;">操作</th>
        </tr>
        </thead>
        <tbody id="tbodyAccountManageList">

        </tbody>
    </table>
</div>
<div class="pageDiv">
    <div class="upPageDiv">上一页</div>
    <div>
        第
        <select class="pageSelect" id="selectPage">
            <option value="1">1</option>
        </select>
        <input type="hidden" id="pageNum" value="1">
        页
    </div>
    <div class="downPageDiv"><a href="">下一页</a></div>
    <div class="allPage">共1页</div>
    <div>
        <select class="limitSelect" id="pageSize">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
        条/页
    </div>
</div>

<div class="modal fade" id="addAccountDiv" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width: 550px;">
        <div class="modal-content">
            <div class="modal-header" style="height: 50px;">
                <h4 class="modal-title">新增账号</h4>
            </div>
            <div class="new-modal-body">
                <label>账号名称：</label>
                <input type="text" class="new-form-control" placeholder="请输入4-16位账号名称" id="loginUser" maxlength="32">
            </div>
            <div class="new-modal-body">
                <label>账号密码：</label>
                <input type="password" class="new-form-control" placeholder="请输入6-16位账号密码" id="loginPassword"
                       maxlength="32">
            </div>
            <div class="new-modal-body">
                <label>用户姓名：</label>
                <input type="text" class="new-form-control" placeholder="请输入2-16位用户姓名" id="name" maxlength="32">
            </div>
            <div class="new-modal-body">
                <label>用户手机：</label>
                <input type="text" class="new-form-control" placeholder="请输入11位用户手机" id="phone" maxlength="11">
            </div>
            <div class="new-modal-body">
                <label>身&emsp;&emsp;份：</label>
                <label th:if="!${county}"><input type="radio" value="1" name="roleId">管理员</label>
                <label style="margin-left: 10%"><input type="radio" value="2" name="roleId" checked>监察员</label>
            </div>

            <div class="new-modal-body">
                <label name="jurisdiction">权&emsp;&emsp;限：</label>
                <div class="adminPowerDiv" style="display: none;">
                    <select class="adminPowerSelect"></select>
                </div>
                <div class="inspectorPowerDiv">
                    <div class="confirmInstitutionListDiv"></div>
                    <div>
                        <input id="institutionName" type="text" class="inspectorPowerSelect" list="inspectorPowerSelect"/>
                        <input class="btn btn-primary confirmInstitution" id="confirmInstitution" type="button" value="✔"><br/>
                        <datalist id="inspectorPowerSelect">
                        </datalist>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveAccountButton">确认提交</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="updateAccountDiv" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width: 550px;">
        <div class="modal-content">
            <div class="modal-header" style="height: 50px;">
                <h4 class="modal-title">修改管辖机构</h4>
                <input type="hidden" id="updateAccountId">
                <input type="hidden" id="updateRoleId">
            </div>
            <div class="new-modal-body">
                <label name="jurisdiction">权&emsp;&emsp;限：</label>
                <div class="adminPowerDiv" style="display: none;">
                    <select class="adminPowerSelectUpdate"></select>
                </div>
                <div class="inspectorPowerDiv">
                    <div class="confirmInstitutionListDivUpdate"></div>
                    <div>
                        <input  id ="institutionNameUpdate" type="text" class="inspectorPowerSelectUpdate" list="inspectorPowerSelectUpdate"/>
                        <input class="btn btn-primary confirmInstitution" id="confirmInstitutionUpdate" type="button" value="✔"><br/>
                        <datalist id="inspectorPowerSelectUpdate">
                        </datalist>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="updateAccountButton">确认提交</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="bindAccountDiv" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width: 550px;">
        <div class="modal-content">
            <div class="modal-header" style="height: 50px;">
                <h4 class="modal-title">绑定App账号ID</h4>
                <input type="hidden" id="bindSupervisorId">
            </div>
            <div class="new-modal-body">
                <label>绑定码：</label>
                <input type="text" class="new-form-control" placeholder="请输入企业微信或钉钉初次登陆绑定码" id="encryptUid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="bindAccountButton">确认提交</button>
            </div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/js/jquery.min.js(v=${version})}"></script>
<script th:src="@{/js/weknow.js(v=${version})}"></script>
<script th:src="@{/plugins/js/bootstrap.js(v=${version})}"></script>
<script th:src="@{/js/loadCheck.js(v=${version})}"></script>
<script th:src="@{/js/accountManage.js(v=${version})}"></script>
<!--载入页面时根据code值执行不同逻辑-->
<script th:if="${code}" th:inline="javascript">
    $(document).ready(function () {
        loadCheck([[${code}]], [[${msg}]]);
    });
</script>
</html>
